<template>
  <el-dialog
    :title="isEdit ? '编辑部门' : '新增部门'"
    :visible.sync="dialogVisible"
    width="30%"
    :close-on-click-modal="false"
    :before-close="close"
  >
    <div>
      <el-form
        ref="RefForm"
        :model="formData"
        label-width="100px"
        :validate-on-rule-change="false"
        :rules="formRules"
        status-icon
      >
        <el-form-item label="上级部门">
          <el-select v-model="formData.parentId" style="width: 100%" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="formData.deptName" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="部门编码" prop="deptCode">
          <el-input v-model="formData.deptCode" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="部门颜色">
          <el-input v-model="formData.color" value="#4876ff" type="color" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="responsibleMan">
          <el-input v-model="formData.responsibleMan" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="负责人电话" prop="responsiblePhone">
          <el-input v-model="formData.responsiblePhone" maxlength="13" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="在示意图显示" prop="visable">
          <el-checkbox v-model="formData.visable">显示</el-checkbox>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import dialogEditMixin from '@/mixins/dialogEdit'
import { department, getDepartmentMaxId } from '@/api/api'
import { eleValidator } from '@/utils/tools'

export default {
  mixins: [dialogEditMixin],
  data() {
    return {
      
      options: [],
      ary: [],
      formRules: {
        deptName: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          {
            validator: eleValidator([
              { rule: 'isEmpty', msg: '部门名称不能为空' },
              {
                rule: 'isRepeat',
                msg: {
                  value: '部门名称重复',
                  url: '/Department/Exists',
                  key: 'deptName'
                }
              }
            ]),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    dialogVisible: function (newValue, oldValue) {
      if (newValue) {
        return
      }
      this.$refs.RefForm.clearValidate()
    }
  },
  methods: {
    async getMaxId() {
      var res = await getDepartmentMaxId()
      var code = res.data + 1

      this.formData.deptCode = ('' + code).padStart(3, 0)
      this.formData.color='#4876ff'
    },
    resetFormData() {
      this.formData = {
        parentId: 0,
        deptCode: '',
        deptName: '',
        color: 'rgb(72, 118, 255)',
        visable: false,
        showColor: true,
        responsibleMan: '',
        responsiblePhone: ''
      }
    },
    async getDepartmentList() {
      this.getMaxId()
      let obj = { pageIndex: 1, pageSize: 1e8 }
      const result = await department('post', obj, false)
      if (result.code === 200) {
        this.options = [{ label: '无', value: 0 }]
        result.data.items.forEach(item => {
          this.options.push({
            label: item.deptName,
            value: item.id
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
